@page "/scheduler/year-view"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@inherits SampleBaseComponent;

<SampleDescription>
    <p>
        This example showcases the year and timeline year views of the Scheduler with the FirstMonthOfYear and MonthCount properties customizations.
        Once the property value has been changed in the properties, it will be reflected in the Scheduler.
    </p>
</SampleDescription>
<ActionDescription>
    <p>
        In this demo, we have showcased the <code>Year</code> and <code>TimelineYear</code> views that help to view the appointment in an annual calendar view. The view options are enabled by using the <code>ScheduleView</code> property.
        In the <code>TimelineYear</code>, <code>Horizontal</code> and <code>Vertical</code> orientations are available to view the events with a different layout. Also this demo explains the customization of the different starting month of
        the year using <code>FirstMonthOfYear</code> property and the number of months using the <code>MonthsCount</code> property.
    </p>
</ActionDescription>

<div class="col-lg-10 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="EventData" Width="100%" Height="555px" CssClass="year-view" @bind-SelectedDate="@CurrentDate" FirstMonthOfYear="@FirstMonthOfYear" MonthsCount="@NumberOfMonths">
            <ScheduleEventSettings DataSource="@AppointmentData"></ScheduleEventSettings>
            <ScheduleViews>
                <ScheduleView Option="View.Year" IsSelected="true"></ScheduleView>
                <ScheduleView Option="View.TimelineYear" Orientation="Orientation.Horizontal" DisplayName="Horizontal Timeline Year"></ScheduleView>
                <ScheduleView MaxEventsPerRow="3" Option="View.TimelineYear" Orientation="Orientation.Vertical" DisplayName="Vertical Timeline Year">
                    <ScheduleViewGroup Resources="@ResourceName"></ScheduleViewGroup>
                </ScheduleView>
            </ScheduleViews>
            <ScheduleResources>
                <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@TaskData" Field="TaskId" Title="Category" Name="Categories" TextField="Text" IdField="Id" ColorField="Color"></ScheduleResource>
            </ScheduleResources>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-2 property-section">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id='property' title='Properties' class='property-panel-table'>
                <tbody>
                    <tr>
                        <td>
                            <SfDropDownList TValue="int" TItem="MonthsData" Placeholder="First month of year" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always" @bind-Value="@FirstMonthOfYear" DataSource="@Months">
                                <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
                            </SfDropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <SfNumericTextBox TValue="int" Placeholder="Number of months" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always" Min="@MinMonth" Max="@MaxMonth" Format="###.##" @bind-Value="@NumberOfMonths">
                            </SfNumericTextBox>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{
    public static List<EventData> AppointmentData = GenerateEvents();
    public DateTime CurrentDate = DateTime.Today;
    public string[] ResourceName = { "Categories" };
    public int FirstMonthOfYear = 1;
    public int MinMonth = 1;
    public int MaxMonth = 24;
    public int NumberOfMonths = 12;
    public List<ResourceData> TaskData { get; set; } = new List<ResourceData> {
        new ResourceData{ Text = "Nancy", Id= 1, Color = "#df5286" },
        new ResourceData{ Text = "Steven", Id= 2, Color = "#7fa900" },
        new ResourceData{ Text = "Robert", Id= 3, Color = "#ea7a57" },
        new ResourceData{ Text = "Smith", Id= 4, Color = "#5978ee" },
        new ResourceData{ Text = "Michael", Id= 5, Color = "#df5286" }
    };
    public List<MonthsData> Months = new List<MonthsData>()
    {
        new MonthsData{ Text = "January", Value = 1 },
        new MonthsData{ Text = "February", Value = 2 },
        new MonthsData{ Text = "March", Value = 3 },
        new MonthsData{ Text = "April", Value = 4 },
        new MonthsData{ Text = "May", Value = 5 },
        new MonthsData{ Text = "June", Value = 6 },
        new MonthsData{ Text = "July", Value = 7 },
        new MonthsData{ Text = "August", Value = 8 },
        new MonthsData{ Text = "September", Value = 9 },
        new MonthsData{ Text = "October", Value = 10 },
        new MonthsData{ Text = "November", Value = 11 },
        new MonthsData{ Text = "December", Value = 12 },
    };

    public static List<EventData> GenerateEvents()
    {
        List<EventData> dataCollections = new List<EventData>(360);
        int count = 250;
        int year = DateTime.Now.Year;
        var names = new string[] { "Bering Sea Gold", "Technology", "Maintenance", "Meeting", "Travelling", "Annual Conference", "Birthday Celebration", "Farewell Celebration", "Wedding Aniversary", "Alaska: The Last Frontier", "Deadest Catch", "Sports Day", "MoonShiners", "Close Encounters", "HighWay Thru Hell", "Daily Planet", "Cash Cab", "Basketball Practice", "Rugby Match", "Guitar Class", "Music Lessons", "Doctor checkup", "Brazil - Mexico", "Opening ceremony", "Final presentation" };
        DateTime startDate = new DateTime(year - 2, 1, 1);
        DateTime endDate = new DateTime(year + 2, 12, 31);
        var id = 1;

        for (var a = 0; a < count; a++)
        {
            Random random = new Random();
            double num = random.NextDouble();

            DateTimeOffset sdate = new DateTimeOffset(startDate).ToUniversalTime();
            long startDateMilliSeconds = sdate.ToUnixTimeMilliseconds();

            DateTimeOffset edate = new DateTimeOffset(endDate).ToUniversalTime();
            long endDateMilliSeconds = edate.ToUnixTimeMilliseconds();

            long Operations = (long)(num * (endDateMilliSeconds - startDateMilliSeconds) + startDateMilliSeconds);
            DateTime start = DateTimeOffset.FromUnixTimeMilliseconds(Operations).UtcDateTime;
            DateTime end = start.AddHours(1);
            int ncount = (int)Math.Floor(Convert.ToDecimal(num * names.Length));
            dataCollections.Add(new EventData
            {
                Id = id,
                Subject = names[ncount],
                StartTime = start,
                EndTime = end,
                IsAllDay = (id % 10 == 0) ? true : false,
                TaskId = (id % 5) + 1
            });
            id++;
        }
        return dataCollections;
    }

    public class MonthsData
    {
        public string Text { get; set; }
        public int Value { get; set; }
    }

    public class ResourceData
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public string Color { get; set; }
    }
    public class EventData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public string Description { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public Nullable<bool> IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
        public string RecurrenceException { get; set; }
        public string StartTimezone { get; set; }
        public string EndTimezone { get; set; }
        public int TaskId { get; set; }
    }
}
<style>
    .year-view.e-schedule .e-timeline-year-view .e-resource-column-table,
    .year-view.e-schedule .e-timeline-year-view .e-resource-left-td {
        width: 120px;
    }

    .property-panel-table td {
        padding-bottom: 1rem;
    }
</style>